<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="left">
            <span class="iconfont Navbar_logo"></span>
        </div>
        <div class="right">
            <span class="iconfont ic_search_tab"></span>
            <a href=""><img src="./images/login.png" alt=""></a>
            <img src="./images/download.png" alt="">
        </div>   

    </header>
    <!-- 选项 -->
    <div class="choose">
        <div class="text">
            <ul>
                <li class="first">首页</li>
                <li>动画</li>
                <li>番剧</li>
                <li>国创</li>
                <li>音乐</li>
            </ul>
        </div>
        <span class="iconfont general_pulldown_s"></span>
    </div>

    <!-- 视频 -->
     <div class="video">
        <a href="#"><img src="./images/01.jpg" alt="">
            <div class="txt">这身材够吹嘘一辈子的，我周睿实名喜欢(❤ ω ❤)</div>

            <!-- 播放 评论 -->
             <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>

                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
             </div>
        </a>
                <a href="#"><img src="./images/02.jpg" alt="">
                    <div class="txt">海 边 的 圣 姨 ！</div>
                
                    <!-- 播放 评论 -->
                    <div class="num">
                        <div class="bofang">
                            <span class="iconfont icon_shipin_bofangshu"></span>
                            <span>132万</span>
                        </div>
                
                        <div class="pinglun">
                            <span class="iconfont icon_shipin_danmushu"></span>
                            <span>2.4万</span>
                        </div>
                    </div>
                </a>
        <a href="#"><img src="./images/03.jpg" alt="">
            <div class="txt">【吉他】很好看的演奏了你一定听过的名曲</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/04.jpg" alt="">
            <div class="txt">这个动作好出片啊</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/05.jpg" alt="">
            <div class="txt">【兄弟们来学习】【我爱学🎹】 《新世纪福音战士》 钢琴演奏#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>



        <a href="#"><img src="./images/06.jpg" alt="">
            <div class="txt">广州漫展上各种才艺亮相</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a><a href="#"><img src="./images/07.jpg" alt="">
            <div class="txt">晴天渔网限定版</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/08.jpg" alt="">
            <div class="txt">曾也身披国旗，冻结全华班11年的夺冠之路，职业选手wh1t3zZ的南柯一梦 【五五开特辑】</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>999万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/09.jpg" alt="">
            <div class="txt">X欲超强的大雷土妹子！刚告白就想榨干男主？</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/10.jpg" alt="">
            <div class="txt">这么大的事情怎么不早说</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/11.jpg" alt="">
            <div class="txt">【Maggieyoo】健身vlog-今日份粉色臀腿训练#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>    
        <a href="#"><img src="./images/1.jpg" alt="">
            <div class="txt">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>

        <a href="#"><img src="./images/1.jpg" alt="">
            <div class="txt">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>

        <a href="#"><img src="./images/1.jpg" alt="">
            <div class="txt">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>

        <a href="#"><img src="./images/1.jpg" alt="">
            <div class="txt">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
        <a href="#"><img src="./images/1.jpg" alt="">
            <div class="txt">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
        
            <!-- 播放 评论 -->
            <div class="num">
                <div class="bofang">
                    <span class="iconfont icon_shipin_bofangshu"></span>
                    <span>132万</span>
                </div>
        
                <div class="pinglun">
                    <span class="iconfont icon_shipin_danmushu"></span>
                    <span>2.4万</span>
                </div>
            </div>
        </a>
     </div>

     <!-- 悬浮条 -->
      <div class="bili">
        <span class="iconfont Navbar_logo"></span>
        <p>打开App，看你感兴趣的视频</p>
      </div>
</body>

</html>